<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }

        #target{
            margin: 20px 0 0 20px;
            width: 400px;
            height: 200px;
            color: lightgray;
            font-size: 25px;
            border: 2px dashed lightgray;
            text-align: center;
            line-height: 200px;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }

    </style>
</head>
<body>
	<div>
    	<div id="target">请把文件拖拽到这里&darr;</div>
		<div id="files"></div>
	</div>

</body>
</html>
<script type="text/javascript">
    var formdata;
    var target = document.getElementById("target");

    // 取消上传区域的默认行为
    target.ondragenter = handlerDrag;
    target.ondragover = handlerDrag;

    function handlerDrag(e){
        e.preventDefault();
    }

    // 文件放入拖拽区域
    target.ondrop = function(e){
        e.preventDefault();

        // 获取拖拽的文件
        var files = e.dataTransfer.files;
        formdata = new FormData();

        // 遍历数据追加到formdata中
        for (var i=0;i<files.length;i++){
            formdata.append("files",files[i]);
        }

        // ajax
        $.ajax({
            url:"http://192.168.124.2:81/api/upload?token=422ad5c7dd348e62357e44beedc8a79e&owner=tyjr",
            type:"POST",
            data:formdata,
            contentType:false,
            processData:false,
            success:function (data) {
            	var obj = eval('(' + data + ')');
				if(obj.msg == 'success'){
					obj.data.forEach(function(item,i){
						
					})
				}

            }
        });
    }

</script>
